<template>
  <j-modal title="申请进度" :width="800" :visible="visible" switchFullscreen @cancel="handleCancel" @ok="handleOk" >
    <div>
      <div>
        <a-descriptions :column="1">
          <a-descriptions-item label="人员姓名">
            {{ form.realName }}
          </a-descriptions-item>
          <a-descriptions-item label="强戒所">
            {{ form.durgRehabilitatioName }}
          </a-descriptions-item>
          <a-descriptions-item label="户籍地详址">
            {{ form.householdAddress }}
          </a-descriptions-item>
          <a-descriptions-item label="申请介入部门">
            {{ form.decisionOrgan }}
          </a-descriptions-item>
          <a-descriptions-item label="介入专干/社工">
            {{ form.professionalsWorker }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="审批流程">
          <a-steps direction="horizontal" style="margin-top: 40px;width: 76%;flex-wrap: wrap;" :current="1" size="small">
            <a-popover slot="progressDot" slot-scope="{ index, prefixCls }">
              <template slot="content">
                <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType')===0">
                  提交申请 ：{{ getContent(index, 'approverName')? getContent(index, 'approverName') : '--' }}
                </p>
                <p style="margin-bottom: 5px;" v-else>
                  审批人 ：{{ getContent(index, 'approverName')? getContent(index, 'approverName'): '--' }}
                </p>
                <p style="margin-bottom: 5px;">单位 ：{{ getContent(index, 'departName')? getContent(index, 'departName'): '--' }}</p>
                <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType')===0">
                  时间：{{ getContent(index, 'createTime')? getContent(index, 'createTime'): '--' }}
                </p>
                <p style="margin-bottom: 5px;" v-else>
                  时间：{{ getContent(index, 'approverTime')? getContent(index, 'approverTime'): '--' }}
                </p>
                <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType')!==0">意见：{{ getContent(index, 'remark')? getContent(index, 'remark'): '--' }}</p>
              </template>
              <span :class="`${prefixCls}-icon-dot`" />
            </a-popover>
            <a-step v-for="(item, index) in list" :key="index" :status="setStatus(item.status)" style="margin-bottom: 28px;">
              <!-- <a-icon v-if="item.recordType === 2" type="exclamation-circle" slot="icon" :style="{ color: '#FE6601', fontSize: '24px' }" /> -->
              <template slot="title" v-if="item.nodeName">
                <span style="font-size: 16px;font-weight: bold;">{{ item.nodeName }}</span>
              </template>
              <div slot="description">
                <p style="font-size: 16px; font-weight: bold;margin: 0 0 5px 0;" :class="[item.status==2?'green':item.status==3?'red':'' ]">
                  {{ item.status==1? '审批人: '+item.approverName: item.recordType!=0? item.statusName: '' }}
                </p>
              </div>
            </a-step>
          </a-steps>
        </a-tab-pane>
      </a-tabs>
    </div>
  </j-modal>
</template>
<script>
import {getSetId, putFile, saverSetup} from "@api/sjsk/specialist";
import Vue from "vue";
import {USER_INFO} from "@/store/mutation-types";
import * as flowServiceApi from "@api/sjsk/flowService";

export default {
  name: 'AddModal',
  props:['data'],
  data() {
    return {
      visible: false,
      form: {},
      startValue: undefined,
      list:[]
    }
  },
  created() {

  },
  methods: {
    show(record) {
      this.visible = true
      this.form = record
      console.log(this.form)
      this.getProcessDetail('795')
    },
    onStartChange() {

    },
    onChange(e) {
      // if (e.target.value == '2') {
      //   this.isPositive = true
      // } else {
      //   this.isPositive = false
      // }
      console.log('radio checked', e.target.value);
    },
    onSwitchChange(e) {
      console.log(e);
      if (e) {
        this.isPolice = true
      } else {
        this.isPolice = false
      }
    },
    handleCancel() {
      this.visible = false
      this.form = {}
    },
    handleOk() {
      if(this.data.supervisResult === 2){
        this.visible = false
      } else {
        putFile(this.data.id).then(ser => {
          if (ser.success){
            this.$message.success('归档成功');
            this.visible = false
            this.$emit('renovate')
          } else {
            this.$message.error('服务器反馈错误');
          }

        }).catch(err => {
          this.$message.error('浏览器反馈错误');
        })
      }

    },
    getContent(index, key) {
      let col = this.list.find((col, i) => i === index)
      if (col && Object.keys(col).length>0) {
        return col[key]
      }
    },
    setStatus(value) {
      // 0：未审批，1：待审批，2：通过，3：驳回
      if (value === 1) {
        return 'process'
      } else if (value === 2) {
        return 'finish'
      } else if (value === 3) {
        return 'error'
      }
    },
    // 查询流程详情`
    getProcessDetail(approvalId) {
      // if(!this.approvalId) return
      let userInfo = Vue.ls.get(USER_INFO)
      let userId = userInfo.id //当前用户id
      flowServiceApi.getProcessDetail(approvalId).then(res => {
        console.log(res)
        if (res.success) {
          this.list = res.result
        } else {
          this.$message.warn(res.message)
        }
      })
    },
  },

}
</script>
<style lang="less" scoped>
.l-form{
  display: flex;
  align-items: center;
  margin-top: -5px;
}
.display>*{
  margin: 5px;
}
.font-gray{
  margin-top: 20px;
  p {
    font-size: 12px;
  }
}
.green {
  color: #52c41a;
}
.red {
  color: #ff4d4f;
}
.blue {
  color: #5a87db;
}
</style>
